<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/b494d1fda6.js"></script>
  <title>My Website</title>
</head>

<body>
  <!-- Header -->
  <section id="header">
    <div class="header container">
      <div class="nav-bar">
        <div class="brand">
          <a href="#hero">
            <h1><span>S</span>pandan <span>T</span>ripathy</h1>
          </a>
        </div>
        <div class="nav-list">
          <div class="hamburger">
            <div class="bar"></div>
          </div>
          <ul>
            <li><a href="#hero" data-after="Home">Home</a></li>
            <li><a href="#services" data-after="Service">Services</a></li>
            <li><a href="#projects" data-after="Projects">Projects</a></li>
            <li><a href="#about" data-after="About">About</a></li>
            <li><a href="#contact" data-after="Contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
  <!-- End Header -->


  <!-- Hero Section  -->
  <section id="hero">
    <div class="hero container">
      <div>
        <h1>Hello, <span></span></h1>
        <h1>My Name is <span></span></h1>
        <h1>Spandan <span></span></h1>
        <a href="#projects" type="button" class="cta">Portfolio</a>
      </div>
    </div>
  </section>
  <!-- End Hero Section  -->

  <!-- Service Section -->
  <section id="services">
    <div class="services container">
      <div class="service-top">
        <h1 class="section-title">Serv<span>i</span>ces</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum deleniti maiores pariatur assumenda quas
          magni et, doloribus quod voluptate quasi molestiae magnam officiis dolorum, dolor provident atque molestias
          voluptatum explicabo!</p>
      </div>
      <div class="service-bottom">
        <div class="service-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
          <h2>Web Design</h2>
          <p> web design is an ever-evolving discipline that blends creativity, technology, and user-centric thinking to create visually appealing, user-friendly, and responsive websites that serve both the aesthetic and functional needs of businesses and individuals in the digital age.</p>
        </div>
        <div class="service-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
          <h2>Machine Learning</h2>
          <p>Machine learning is a subfield of artificial intelligence that focuses on developing algorithms and models that can learn and make predictions or decisions based on data.Machine learning requires large datasets for training and often involves complex mathematics, statistics, and programming.</p>
        </div>
        <div class="service-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
          <h2>Ethical Hacking</h2>
          <p>Ethical hacking, also known as penetration testing or white-hat hacking, involves authorized individuals or professionals, known as ethical hackers, attempting to identify vulnerabilities in computer systems.Ethical hackers follow strict ethical guidelines,reporting findings responsibly to the organization.</p>
        </div>
        <div class="service-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/services.png" /></div>
          <h2>Artificial Intelligence</h2>
          <p>AI is a transformative and dynamic field that holds promise for solving complex problems, but it also comes with important ethical and societal considerations that require careful attention and responsible development.Responsible AI and governance are essential to address these challenges.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- End Service Section -->

  <!-- Projects Section -->
  <section id="projects">
    <div class="projects container">
      <div class="projects-header">
        <h1 class="section-title">Recent <span>Projects</span></h1>
      </div>
      <div class="all-projects">
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Coding is Love</h2>
            <p>For those who are passionate about coding, it often represents more than just a job or a skill; it's a creative outlet, a means of solving problems, and a way to bring innovative ideas to life. Coding allows individuals to express themselves through lines of code and to build digital solutions that can have a real impact on the world.</p>
          </div>
          <div class="project-img">
            <img src="./img/img-1.png" alt="img">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 2</h1>
            <h2>Coding is Love</h2>
            <p>For those who are passionate about coding, it often represents more than just a job or a skill; it's a creative outlet, a means of solving problems, and a way to bring innovative ideas to life. Coding allows individuals to express themselves through lines of code and to build digital solutions that can have a real impact on the world.</p>
          </div>
          <div class="project-img">
            <img src="./img/img-1.png" alt="img">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 3</h1>
            <h2>Coding is Love</h2>
            <p>For those who are passionate about coding, it often represents more than just a job or a skill; it's a creative outlet, a means of solving problems, and a way to bring innovative ideas to life. Coding allows individuals to express themselves through lines of code and to build digital solutions that can have a real impact on the world.</p>
          </div>
          <div class="project-img">
            <img src="./img/img-1.png" alt="img">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 4</h1>
            <h2>Coding is Love</h2>
            <p>For those who are passionate about coding, it often represents more than just a job or a skill; it's a creative outlet, a means of solving problems, and a way to bring innovative ideas to life. Coding allows individuals to express themselves through lines of code and to build digital solutions that can have a real impact on the world.</p>
          </div>
          <div class="project-img">
            <img src="./img/img-1.png" alt="img">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 5</h1>
            <h2>Coding is Love</h2>
            <p>For those who are passionate about coding, it often represents more than just a job or a skill; it's a creative outlet, a means of solving problems, and a way to bring innovative ideas to life. Coding allows individuals to express themselves through lines of code and to build digital solutions that can have a real impact on the world.</p>
          </div>
          <div class="project-img">
            <img src="./img/img-1.png" alt="img">
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Projects Section -->

  <!-- About Section -->
  <section id="about">
    <div class="about container">
      <div class="col-left">
        <div class="about-img">
          <img src="./img/img-2.jpg" alt="img">
        </div>
      </div>
      <div class="col-right">
        <h1 class="section-title">About <span>me</span></h1>
        <h2>Front End Developer</h2>
        <p>Front-End Developers are essential for creating visually appealing, user-friendly, and responsive websites and web applications. They bridge the gap between design and functionality, ensuring that users have a positive experience when interacting with web interfaces.</p>
        <a href="#" class="cta">Download Resume</a>
      </div>
    </div>
  </section>
  <!-- End About Section -->

  <!-- Contact Section -->
  <section id="contact">
    <div class="contact container">
      <div>
        <h1 class="section-title">Contact <span>info</span></h1>
      </div>
      <div class="contact-items">
        <div class="contact-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" /></div>
          <div class="contact-info">
            <h1>Phone</h1>
            <h2>7377126109</h2>
            <h2>+1 234 123 1234</h2>
          </div>
        </div>
        <div class="contact-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" /></div>
          <div class="contact-info">
            <h1>Email</h1>
            <h2>tripathyspandan23@gmail.com</h2>
            <h2>abcd@gmail.com</h2>
          </div>
        </div>
        <div class="contact-item">
          <div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" /></div>
          <div class="contact-info">
            <h1>Address</h1>
            <h2>Scientific nagar, Berhampur, Odisha , PIN- 760001, India</h2>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->

  <!-- Footer -->
  <footer>
    <div class="row">
        <div class="col">
            <img src="img/logo.png" alt="logo img" class="logo-f">
            <p>A portfolio is a valuable tool for presenting and showcasing one's work, accomplishments, and skills. It serves as a means of documentation, self-presentation, and communication, whether in the professional, academic, or creative context.</p>
        </div>
        <div class="col" id="services">
            <h3>Office <div class="underline"><span></span></div></h3>
            <p>New Bus stand road</p>
            <p>Scientific nagar, Berhampur</p>
            <p>Odisha , PIN- 760001, India</p>
            <p class="email-id">tripathyspandan23@gmail.com</p>
            <h4>+91 7377126109</h4>
        </div>
        <div class="col">
            <h3>links <div class="underline"><span></span></div></h3>
            <ul class="footer-b">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Serivces</a></li>
                <li><a href="#contact">Contact us</a></li>
            </ul>
        </div>
        <div class="col">
            <h3>NewsLetter <div class="underline"><span></span></div></h3>
            <form class="footer-d">
                <i class="fa-regular fa-envelope"></i>
                <input type="email" placeholder="Enter your email" required>
                <button type="submit"><i class="fa-solid fa-arrow-right"></i></button>
            </form>
            <div class="light">
                <ul>
                    <li> <a href="https://www.facebook.com/spandan.tripathy.07" target="_blank">
                    <i class="fa-brands fa-facebook-f"></i></a></li>           
                    <li><a href="https://twitter.com/SpandanTri49718" target="_blank">
                    <i class="fa-brands fa-twitter"></i></a></li>        
                    <li> <a href="https://www.instagram.com/spandan_tripathy/" target="_blank">
                    <i class="fa-brands fa-instagram"></i></a></li>                
                    <li> <a href="https://www.linkedin.com/in/spandan-tripathy-9a9b33251" target="_blank">
                    <i class="fa-brands fa-linkedin"></i></a></li>                        
                </ul>
            </div> 
        </div>
    </div>
    <hr>
    <p class="copyright">Copyright &copy; 2023 www.stocks.com - All rights reseverd</p>
</footer>
  <!-- End Footer -->
  <script src="./app.js"></script>
</body>

</html>